<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 新浪导航条 </title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .navs {
            width: 1000px;
            margin: 50px auto;
            list-style-type: none;
            text-align: right;
            padding: 0  0 0 10px;
            box-sizing: border-box;
            background-color: #fcfcfc;
            border-bottom: 1px solid #ddd;
        }

        .navs li {
            display: inline-block;
            line-height: 50px;
            padding: 0 25px;
            cursor: pointer;
            position: relative;
             box-sizing: border-box;
        }
       

        .navs>li:hover {
            background-color: #f2f2f2;
        }

        .sub_navs {
            display: none;
            position: absolute;
            left: 0;
            top: 50px;
            width: 79px;
            text-align: left;
            border: 1px solid #fecc5b;
        }

        .sub_navs li {
            width: 100%;
            padding: 0;
            text-align: center;
            box-sizing: border-box;
            border-bottom: 1px solid #fecc5b;
        }

        .sub_navs li:hover {
            background-color: rgba(254, 206, 93, 0.5);
        }
    </style>
</head>

<body>

    <ul class="navs">
        <li>
            <span>首页</span>
            <ul class="sub_navs">
                <li>新闻</li>
                <li>生活</li>
                <li>娱乐</li>
                <li>社交</li>
            </ul>
        </li>
        <li>
            <span>微博</span>
            <ul class="sub_navs">
                <li>私信</li>
                <li>评论</li>
                <li>@我</li>
            </ul>
        </li>
        <li>
            <span>博客</span>
            <ul class="sub_navs">
                <li>博客评论</li>
                <li>未读提醒</li>
            </ul>
        </li>
        <li>
            <span>邮箱</span>
            <ul class="sub_navs">
                <li>免费邮箱</li>
                <li>VIP邮箱</li>
                <li>企业邮箱</li>
                <li>客户端</li>
            </ul>
        </li>
    </ul>

</body>
<script src="../lib/font/jquery.min.js"></script>
<script>
    $(function () {
        $(' li').hover(
            function () {
                $(this).find('span').css('color','#fecc5b');
                $(this).find('.sub_navs').show();
            },
            function () {
                $(this).find('span').css('color','#000');
                $(this).find('.sub_navs').hide();
            })

    });
</script>

</html>